<template>
  <!-- 折线图 -->
  <div class="madp-enchart-line">
    <div :id="chartId" class="chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  data() {
    return {}
  },
  props: {
    isUpdate: {
      type: Boolean,
      default: false
    },
    chartId: {
      type: String,
      default: ''
    },
    xData: {
      type: Array,
      default: []
    },
    seriesData: {
      type: Array,
      default: []
    }
  },
  watch: {
    isUpdate: function () {
      if (this.isUpdate) {
        this.initChart()
      }
      this.$emit('update:isUpdate', false)
    }
  },
  created() {
    this.initChart()
  },
  mounted() {},
  methods: {
    initChart() {
      this.$nextTick(() => {
        var chartDom = document.getElementById(this.chartId)
        var myChart = echarts.init(chartDom)
        myChart.setOption({
          grid: {
            top: '15%',
            left: '5%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: this.xData,
            axisLabel: {
              interval: this.xData.length > 7 ? this.xData.length - 2 : 0
            }
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            y: 'top'
          },
          series: [
            {
              data: this.seriesData,
              type: 'line',
              smooth: true,
              showSymbol: true,
              color: '#FC823F',
              lineStyle: {
                color: '#FC823F'
              },
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(252, 130, 63, 1)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(252, 130, 63, 0.1)' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                }
              }
            }
          ]
        })
      })
    }
  }
}
</script>
<style scoped lang='scss'>
.madp-enchart-line {
  .chart {
    width: 100%;
    height: 220px;
    margin: 0 auto;
    padding: 0;
    margin: 0;
  }
}
</style>